<template>
    <div id="app">
        <transition :name="transName">
            <router-view></router-view>
        </transition>


        <div class="rulesPopup" v-show="showRules" :class={show:aniShowRules}>
            <div class="bg"></div>
            <div class="inner">
                <header-bar title="车险购买规则说明">
                    <a class="back" @click="onBackClick">back</a>
                </header-bar>
                <div class="body">
                    <h6>车险规则：</h6>
                    <ul>
                        <li>适用于车辆商业险即将到期的车主(保险在报价窗口期)。</li>
                        <li>车险报价不等于核保价格，会有细微波动，具体价格请以最终核保价格为准。</li>
                        <li>需要为凹凸平台的注册会员。</li>
                        <li>凹凸在报价核保的过程中有权使用车辆的真实信息。</li>
                        <li>本活动最终解释权归凹凸租车所有。</li>
                    </ul>
                    <br/>
                    <h6>承保政策限制：</h6>
                    <strong>太平洋车险：</strong>
                    <ul>
                        <li>新车购置价低于6万，需购买组合险（不建议承保）；</li>
                        <li>车龄超过5年，无法承保划痕险及涉水险；</li>
                        <li>车龄超过10年，无法承保车损险；</li>
                        <li>车龄超过12年，暂不承保。</li>
                    </ul>
                    <br/>
                    <strong>人保车险：</strong>
                    <ul>
                        <li>新车购置价低于10万元，暂不承保；</li>
                        <li>非新车无法承保涉水险；</li>
                        <li>车龄超过3年，无法承保划痕险。</li>
                    </ul>
                </div>
            </div>
        </div>

        


    </div>
</template>

<script>
import '@/assets/reset'
import emitter from '@/assets/emit'
import headerBar from '@/components/header'

export default {
    created() {
        emitter.$on('openRules', () => {
            this.showRules = true
            setTimeout(() => {
                this.aniShowRules = true
            })
        })
    },
    data() {
        return {
            transName: 'slide-right',
            showRules: false,
            aniShowRules: false,
        }
    },
    methods: {
        onBackClick() {
            this.aniShowRules = false
            setTimeout(() => {
                this.showRules = false
            }, 400)
        }
    },
    watch: {
        '$route': (to, from) => {
            console.log(to, from)
        }
    },
    components: {
        headerBar
    }
}
</script>

<style lang="scss">
html, body, #app {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.rulesPopup {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        -webkit-transition: all 0.25s ease-out;
        background-color: rgba(0,0,0,0);
    }
    .inner {
        background-color: #fff;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        -webkit-transition: all 0.25s ease-out;
        -webkit-transform: translate(0,100%);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        .body {
            -webkit-box-flex: 1;
            padding: 0.3rem;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            h6 {
                font-size: 0.28rem;
                font-weight: normal;
                margin-bottom: 0.1rem;
            }
            ul {
                list-style-type: decimal;
                padding-left: 2em;
                font-size: 0.26rem;
                color: #666;
                li {
                    margin-bottom: 0.1rem;
                    text-align: justify;
                }
            }
            strong {
                font-size: 0.28rem;
                line-height: 1.5;
                margin-bottom: 0.05rem;
                display: block;
            }
        }
    }
    &.show {
        pointer-events: auto;
        .bg {
            background-color: rgba(0,0,0,0.7);
        }
        .inner {
            -webkit-transform: translate(0,0);
        }
    }
}
</style>
